<template>
  <div>
    <div class="activity">
      <div class="center">
        <div class="banner">
          <img src="../assets/img/activity/download.jpg" alt="" />
        </div>
        <div class="tabs">
          <span @click="now=index+1" :class="{active:now==index+1}" v-for="(item,index) in goods" :key="index">
            {{item}}
          </span>
        </div>
        <div class="content-box">
          <div class="list" v-show="now==1">
            <ul>
              <li v-for="index in 2" :key="index">
                <div class="none-stock" v-show="isShow==false">暂不配送</div>
                <a href="">
                  <img src="../assets/img/activity/cake.jpg" alt="" />
                </a>
                <div class="list-pro">
                  <span>君度黑白巧克力慕斯</span>
                  <span>¥199/454g(1.0磅)</span>
                </div>
                <span class="btn">订购</span>
              </li>
            </ul>
          </div>
          <div class="list" v-show="now==2">
            <ul>
              <li v-for="index in 10" :key="index">
                <div class="none-stock" v-show="isShow">暂不配送</div>
                <a href="">
                  <img src="../assets/img/activity/a743d80cff6a71e2f9a28aae3478d334.jpg" alt="" />
                </a>
                <div class="list-pro">
                  <span>21cake200元储蓄卡</span>
                  <span>¥200/张</span>
                </div>
                <span class="btn" @click="num++">订购</span>
              </li>
            </ul>
          </div>
          <div class="list" v-show="now==3">
            <ul>
              <li v-for="index in 10" :key="index">
                <div class="none-stock" v-show="isShow">暂不配送</div>
                <a href="">
                  <img src="../assets/img/activity/71e29a5d9c2e83bcea31aa4d38bb19f2.jpg" alt="" />
                </a>
                <div class="list-pro">
                  <span>巴布亚新几内亚盒装（10包入）</span>
                  <span>¥10/10g(包)</span>
                </div>
                <span class="btn" @click="num++">订购</span>
              </li>
            </ul>
          </div>
          <div class="order">
            <div class="select">
              <h2>已选的商品({{num}})</h2>
            </div>
            <h2 class="msg">订单信息</h2>
            <div class="order-info">
              <div class="order-left">
                <ul>
                    <li>
                        <span>收货人:</span>
                        <input type="text" placeholder="收货人姓名">
                    </li>
                    <li>
                        <span>练习方式:</span>
                        <input type="text" placeholder="收货人联系方式">
                    </li>
                    <li>
                        <span>城市:</span>
                        <select name="" id="1">
                            <option value="">省</option>
                            <option value="">甘肃</option>
                        </select>
                         <select name="" id="2">
                            <option value="">市</option>
                            <option value="">兰州市</option>
                        </select>
                         <select name="" id="3">
                            <option value="">区/县</option>
                            <option value="">城关区</option>
                        </select>
                    </li>
                    <li>
                        <span>详细地址</span>
                        <textarea placeholder="请输入详细地址"></textarea>
                    </li>
                </ul>
              </div>
              <div class="order-right">
                <div class="f1">
                    <div>
                        <span>商品金额:</span>
                        <span>¥:0.00</span>
                    </div>
                    <div>
                        <span>配送费:</span>
                        <span>¥:0.00</span>
                    </div>
                   
                </div>
                 <div class="f2">
                        <span>合计:</span>
                        <span>¥</span>
                        <span class="price">0.00</span>
                    </div>
                    <p class="f3">发货及到货时间参考产品详情页说明</p>
    
                <span class="price-btn">在线付款</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            num:0,
            isShow:false,
            now: 1,
            goods:['蛋糕','卡券','咖啡'],
        }
    },
   
};
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
.activity{
    font-family: 'PingFang SC','Heiti SC','微软雅黑',Helvetica,Arial;
    font-size: 12px;
    color: #684029;
    cursor: pointer;
    user-select: none;
}
.center{
    width: 1200px;
    margin: 0 auto;
}
.banner{
    width: 100%;
}
.banner img{
    width: 100%;
}
.tabs{
    width: 100%;
    height: 55px;
    padding-top: 10px;
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #e9e9e9;
}
.tabs span{
    display: inline-block;
    line-height: 52px;
    margin: 0 15px;
    color: #5a5a5a;
}
.tabs span.active{
    color: #8b572a;
    border-bottom: 3px solid #8b572a;
}
.content-box{
    padding-bottom: 50px;
}
.content-box .list ul{
    display: flex;
    flex-wrap: wrap;
}
.content-box .list ul li{
    width: 228px;
    padding: 0 36px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.content-box .list ul li .none-stock{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 360px;
    left:0;
    top:0;
    background-color: rgba(255,255,255,0.7);
    font-size: 15px;
    z-index: 999;
}
.content-box .list ul li img{
    width: 228px;
    height: 251px;
    display: block;
}
.content-box .list ul li .list-pro{
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 20px;
    margin: 10px;
    margin-bottom: 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.content-box .list ul li .list-pro span:nth-child(1):hover{
    color: #bb9772;
}
.content-box .list ul li .list-pro span:nth-child(2){
    color: #bb9772;
    margin-top: 10px;
}
.content-box .list ul li .btn{
    background-color: #684029;
    color: #fff;
    width: 136px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 30px;
    margin-top: 15px;
}
.content-box .order{
    margin-top: 70px;
}
.content-box .order .select{
    border: 1px solid #e1e1e1;
    margin-top: 28px;
}
.content-box .order .select h2{
    height: 44px;
    background-color: #fafafa;
    line-height: 44px;
    padding-left: 34px;
    font-size: 13px;
    font-weight: normal;
}
.content-box .order .msg{
    height: 44px;
    background: #FAFAFA;
    border: 1px solid #E1E1E1;
    line-height: 44px;
    padding-left: 34px;
    font-size: 13px;
    margin-top: 28px;
    font-weight: normal;
}
.content-box .order .order-info{
    margin-top: 20px;
    border: 1px solid #e1e1e1;
    padding: 14px 55px 32px 17px;
    background-color: #fafafa;
    margin-bottom: 64px;
    display: flex;
    justify-content: space-between;
}
.content-box .order .order-info .order-left{
    width: 800px;
}
.content-box .order .order-info .order-left ul li{
    margin-bottom: 12px;
}
.content-box .order .order-info .order-left ul li span{
    display: inline-block;
    width: 75px;
    color: #b3b3b3;
    line-height: 40px;
    font-size: 13px;
    vertical-align: top;
}
.content-box .order .order-info .order-left ul li input{
    height: 38px;
    width: 160px;
    padding-left: 8px;
    border: 1px solid #efefef;
    font-size: 13px;
    outline: none;
    
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
        color: #c9c9c9;
    }
.content-box .order .order-info .order-left ul li textarea{
    width: 520px;
    height: 70px;
    border: 1px solid #efefef;
    padding: 5px ;
    display: inline-block;
    outline: none;
    resize: none;
}
.content-box .order .order-info .order-left ul li select{
    width: 168px;
    height: 38px;
    margin-right: 15px;
    font-size: 13px;
    outline: none;
    padding-left: 8px;
    border: 1px solid #efefef;
}
.content-box .order .order-info .order-right{
    width: 310px;
    margin-top: 54px;
    text-align: right;
    font-size: 13px;
    line-height: 18px;
}
.content-box .order .order-info .order-right .f1 div{
    margin: 0 0 15px;
}
.content-box .order .order-info .order-right .f2{
    border-top: 2px solid #e2e2e2;
    width: 232px;
    display: inline-block;
    padding-top: 15px;
    text-align: right;
    line-height: 18px;
    margin-bottom: 15px;
    font-size: 13px;
}
.content-box .order .order-info .order-right .f1 span:nth-child(1){
    margin-right: 10px;
}
.content-box .order .order-info .order-right .f2 .price{
    color: #ff714d;
}
.content-box .order .order-info .order-right .f2 span:nth-child(1){
    margin-right: 10px;
}
.content-box .order .order-info .order-right .f3{
    color: #d8bfa7;
    text-align: right;
    margin-bottom: 15px;
    line-height: 18px;
    font-size: 13px;
}
.content-box .order .order-info .order-right .price-btn {
    background-color: #684029;
    width: 232px;
    height: 34px;
    color: #fff;
    display: inline-block;
    text-align: center;
    line-height: 34px;
}
.content-box .order .order-info .order-right .price-btn.disabled{
    background-color: #bfbfbf;
    cursor: not-allowed;
}
</style>